import { defineComponent, watch, ref, type PropType } from 'vue'
interface IStyle {
  color?: string
  fontSize?: string
  backgroundColor?: string // 分类标签背景填充色
  borderColor?: string // 分类标签选中项横线色
  borderBottom?: string
  fontWeight?: number
}
export default defineComponent({
  props: {
    // 选中项文字样式
    selectText: {
      type: Object as PropType<IStyle>
    },
    // 未选中项文字样式
    text: {
      type: Object as PropType<IStyle>
    },
    headerStyle: {
      type: Object as PropType<IStyle>
    },
    type: {
      type: Number,
      default: 1
    }
  },
  setup(props) {
    /** 未选中项文字样式 */
    const textStyle = ref<IStyle>({
      color: '#48494D',
      fontSize: '14px'
    })
    const headerStyle = ref<IStyle>({
      backgroundColor: 'white'
    })
    /** 选中项文字样式 */
    const selectedTextStyle = ref<IStyle>({
      borderBottom: '1px solid'
    })
    const tabList = ['推荐', '最新', '最热', '电视剧', '电影', '影人']
    watch(
      props,
      () => {
        selectedTextStyle.value = Object.assign(selectedTextStyle.value, props.selectText)
        headerStyle.value = Object.assign(headerStyle.value, props.headerStyle)
        textStyle.value = Object.assign(textStyle.value, props.text)
      },
      { deep: true, immediate: true }
    )
    return () => (
      <>
        <header
          class="h-12  w-full flex items-end pb-2 justify-between pl-4 pr-[14px] home-default"
          style={headerStyle.value}
        >
          {tabList.map((item, index) => {
            return (
              <span key={index} style={index + 1 === props.type ? selectedTextStyle.value : textStyle.value}>
                {item}
              </span>
            )
          })}
          <span class="float-right" style={textStyle.value}>
            图标
          </span>
        </header>
      </>
    )
  }
})
